<div class="row">
  <div id="slideshow" class="swiper-slideshow swiper-box">
    <div class="swiper-wrapper">
      <?php foreach ($banners as $banner) { ?>
        <div class="swiper-slide">
          <?php if ($banner['link']) { ?>
          <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
          <?php } else { ?>
          <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
          <?php } ?>
        </div>
      <?php } ?>
    </div>
    <div class="swiper-pagination swiper-pagination-black"></div>
  </div>
</div>

<script>
  $(document).ready(function() {
    var module_slideshow_swiper = new Swiper('#slideshow', {
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
      },
      paginationClickable: true,
      spaceBetween: 0,
      autoplay: {
        delay: 5000,
      },
      loop: true,
      grabCursor: true,
      autoplayDisableOnInteraction: false,
    });
  });
</script>
